<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <!-- 引入vue -->
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <!-- 引入vue的ajax -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="dept">
    员工ID:<input type="text" name="fkDeptId" placeholder="请输入员工ID" v-model="fkDeptId"/><br>
    职级&emsp;:<input type="text" name="infoJob" placeholder="请输入职级" v-model="infoJob"/><br>
    薪水&emsp;:<input type="text" name="infoSalary" placeholder="请输入薪水" v-model="infoSalary"/><br>
    <input type="button" value="添加" @click="insertOneDeptinfo"><br><br>
    <div v-if="returnvalue === true"><span>添加成功</span></div><br><br>
    <div v-else-if="returnvalue === false"><span>添加失败</span></div>
    <hr width="100%">
    查询员工职业生涯信息:<br>
    查询员工的ID:<input type="text" name="fkDeptId" placeholder="请输入员工ID" v-model="fkDeptId"/><br>
    <input type="button" value="查询" @click="getDeptAndDeptInfoById"><br>
    <table border="1px" cellspacing="0px">
        <tr bgcolor="antiquewhite">
            <th>职级</th>
            <th>薪水</th>
            <th>在岗时期</th>
        </tr>
        <tr bgcolor="white" v-for="obj in deptInfoLists":key="obj.id">
            <td>{{obj.infoJob}}</td>
            <td>{{obj.infoSalary}}</td>
            <td>{{obj.infoTime}}</td>
        </tr>
    </table>
</div>
<script>
    <!-- 需要创建一个vue,并给vue传递参数, 参数是以对象的形式传入, js的对象{} -->
    new Vue({
        //el : element节点, 就是js的节点  #获取节点
        'el':'#dept',
        // 传入获取数据的方法 data
        data(){ // 该方法是返回vue的全局数据
            //返回的是JSON格式的对象
            return {
                fkDeptId:'',
                infoJob:'',
                infoSalary:'',
                returnvalue:'',
                deptInfoLists:[],
                url:'http://localhost:8080'
            }
        },
        methods:{ //配置方法的对象
            insertOneDeptinfo(){
                console.log(this.fkDeptId)
                let fd=new FormData() //数据对象
                fd.append("fkDeptId",this.fkDeptId)
                fd.append("infoJob",this.infoJob)
                fd.append("infoSalary",this.infoSalary)
                axios.post(this.url+"/deptinfo/postform",fd).then(
                    r=>{
                        if (r.data === true){
                            this.returnvalue = true
                            this.fkDeptId = ""
                            this.infoJob = ""
                            this.infoSalary = ""
                        }else{
                            console.log("添加失败")
                        }
                    }
                )
            },
            getDeptAndDeptInfoById(){
                let geturl = this.url + "/dept/select/"+this.fkDeptId //get请求的ajax操作
                axios.get(geturl).then(
                    r=>{
                        let result= r.data //获取ajax返回的数据
                        this.deptInfoLists = result.deptInfoList
                    }
                )
            },
        }
    })
</script>
</body>
</html>